<script>
import ZuHeShi from '../../components/zuheapi/zuheshi.vue'
import { ref, computed } from 'vue'

export default {
  name: 'ZuHeShiView',
  components: { ZuHeShi },
  setup() {
    const intro = ref('使用 Composition API 的 ref / computed / 方法来管理状态与逻辑。')
    const words = computed(() => intro.value.length)
    return { intro, words }
  }
}
</script>

<template>
  <div class="page">
    <header class="header">
      <h1>组合式 API（Composition API）示例</h1>
      <p>{{ intro }}</p>
      <small>简介字数：{{ words }}</small>
    </header>
    <ZuHeShi />
  </div>
</template>

<style scoped>
.page { padding: 24px; background: #f4f5f5; min-height: 100vh; }
.header h1 { margin: 0 0 8px; font-size: 24px; color: #1d2129; }
.header p { color: #4e5969; margin: 0 8px 4px 0; }
small { color: #86909c; }
</style>